昨天認識了 API，了解到網站可以透過 API 和其他服務進行溝通、取得資料。
不過，如果要真的做出「AI 避雷探針」這個網站，除了 Gemini、API 和 JSON 之外，還需要先了解網站本身是怎麼製作的。
所以今天開始認識網站開發中很常見的三個技術：
HTML、CSS、JavaScript
這三個東西雖然都會出現在網頁開發中，但負責的工作其實不太一樣。

HTML 是什麼？

HTML 的全名是 HyperText Markup Language，中文稱為「超文本標記語言」。
HTML 主要負責建立網頁的內容與結構。
例如網頁上的：

• 標題
• 文字
• 圖片
• 按鈕
• 輸入框
• 表格

都可以透過 HTML 建立。
可以把 HTML 想成是網站的「骨架」。
例如：

這段 HTML 就可以建立一個標題、一段文字和一個按鈕。

CSS 是什麼？

CSS 的全名是 Cascading Style Sheets，中文稱為「階層式樣式表」。
CSS 主要負責網站的外觀與排版。
例如：

• 顏色
• 字體大小
• 背景
• 按鈕樣式
• 間距
• 網頁版面
• RWD 響應式設計

如果 HTML 是網站的骨架，那 CSS 就像是網站的「外觀」。
例如可以設定：

h1 {
  font-size: 32px;
}

button {
  padding: 10px 20px;
}

讓網頁上的標題和按鈕有不同的樣式。

JavaScript 是什麼？

JavaScript 是一種程式語言，主要用來讓網站具有互動和功能。
例如：

• 點擊按鈕後執行動作
• 取得使用者輸入的內容
• 顯示或隱藏資訊
• 讀取 API 回傳的資料
• 處理 JSON
• 動態更新網頁內容
  例如：

button.addEventListener("click", function() {
  console.log("開始分析");
});

當使用者點擊按鈕時，就可以讓網站執行指定的功能。

三者有什麼不同？

可以用一個簡單的方式理解：
HTML → 網頁有什麼
CSS → 網頁長什麼樣子
JavaScript → 網頁可以做什麼
如果用房子來比喻：
HTML → 房子的結構
CSS → 房子的裝潢
JavaScript → 房子的功能
三者搭配起來，才能建立一個具有內容、外觀和互動功能的網站。

今天的學習

今天主要認識了網站開發中常見的 HTML、CSS 和 JavaScript。
以前看到網頁時，可能只會覺得它是一個完整的網站，但今天開始了解到，一個網站其實可以拆成不同的部分。
HTML 負責內容與結構，CSS 負責外觀與排版，而 JavaScript 則負責互動與功能。
接下來還會繼續認識這個專案需要使用的工具，並慢慢把前面學到的 Gemini、API 和 JSON 串進網站裡。